<template>
    <div>
        <panle title='欢迎语' content="欢迎语列表"></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="sys:role:add" type="primary" label="添加"></pers-button>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.keyword" size="mini" placeholder="请输入名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                  v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="55"></el-table-column>
            <el-table-column prop="title" label="欢迎语名称"> </el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="nick_name" label="使用员工"></el-table-column>
            
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
           
            <el-table-column prop="id" label="操作" >
                <template slot-scope="scope">
                    <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="sys:role:edit" @click="editGreeting(scope.row)"></PersButton>
                    <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="delGreeitng(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                           :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="open" width="900px" append-to-body :title="!form.id ? '新增欢迎语' : '修改欢迎语'" >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    
                    <el-col :span="24">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" placeholder="请输入欢迎语名称" size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容" prop="content">
                            <vue-editor v-model="form.content"></vue-editor>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图片" prop="image">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="form.image" :src="form.image" width="100%" height="100%" />
                                    <img v-else src="../../../../assets/img/uploadimg.jpg" width="100%" height="100%" />
                                </div>
                                <el-button type="primary" @click="openUploadImage()" size="mini"
                                           style="margin-top:10px">上传图片</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="视频" prop="video">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <el-tag v-if="form.video" :lable="form.video" type="danger"  effect="plain" 
                                            >MP4</el-tag>

                                </div>
                                <el-button type="primary" @click="openUploadVideo()" size="mini"
                                           style="margin-top:10px">上传视频</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="文件" prop="files">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <el-tag v-if="form.files" :lable="form.files" type="warning"  effect="plain" size="small"
                                    >File</el-tag>

                                </div>
                                <el-button type="primary" @click="openUploadFiles()" size="mini"
                                           style="margin-top:10px">上传文件</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="30">
                        <el-form-item label="网页" prop="url">
                            <el-input v-model="form.url" placeholder="请输入网页地址" size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="使用员工" v-if="userList.length > 0">
                            <el-checkbox-group v-model="form.checkList">
                                <el-checkbox v-for="(item, index) in userList"  :key="index" :label="item.userid" :disabled="(item.disabled)" :checked="(item.checked)"> {{ item.name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form') " size="small">确 定</el-button>
            </div>

        </el-dialog>
        <!--图片--->
        <el-dialog :visible.sync="openImage" width="900px" append-to-body :title=" '添加图片'">
            <el-form ref="resForm" :model="resForm"  label-width="80px">
                <el-table :data="tableDataImage" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading" @selection-change="handleSelectionChangeImage">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="55"></el-table-column>
                    <el-table-column prop="name" label="名称"> </el-table-column>
                    <el-table-column prop="src" label="素材图片">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.src" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="block">

                    <el-pagination @size-change="handleSizeChangeImage" @current-change="handleCurrentChangeImage" :current-page="pageNumber_image"
                                   :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_image" background layout="total, sizes, prev, pager, next, jumper"
                                   :total="total_image">
                    </el-pagination>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openImage = false" size="small">取 消</el-button>
                <el-button type="primary" @click=" submitImageForm('resForm')  " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!--视频--->
        <el-dialog :visible.sync="openVideo" width="900px" append-to-body :title=" '添加视频'">
            <el-form ref="resForm" :model="resFormVideo"  label-width="80px">
                <el-table :data="tableDataVideo" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading" @selection-change="handleSelectionChangeVideo">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="55"></el-table-column>
                    <el-table-column prop="name" label="名称"> </el-table-column>
                    <el-table-column prop="media_id" label="素材ID"> </el-table-column>
                </el-table>

                <div class="block">

                    <el-pagination @size-change="handleSizeChangeVideo" @current-change="handleCurrentChangeVideo" :current-page="pageNumber_video"
                                   :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_video" background layout="total, sizes, prev, pager, next, jumper"
                                   :total="total_video">
                    </el-pagination>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openVideo = false" size="small">取 消</el-button>
                <el-button type="primary" @click=" submitVideoForm('resFormVideo')  " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!--上传文件-->
        <el-dialog :visible.sync="openFiles" width="900px" append-to-body :title=" '添加文件'">
            <el-form ref="resForm" :model="resFormFiles"  label-width="80px">
                <el-table :data="tableDataFiles" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                          v-loading="loading" @selection-change="handleSelectionChangeFiles">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="55"></el-table-column>
                    <el-table-column prop="name" label="名称"> </el-table-column>
                    <el-table-column prop="media_id" label="素材ID"> </el-table-column>

                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChangeFiles" @current-change="handleCurrentChangeFiles" :current-page="pageNumber_files"
                                   :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_files" background layout="total, sizes, prev, pager, next, jumper"
                                   :total="total_files">
                    </el-pagination>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openFiles = false" size="small">取 消</el-button>
                <el-button type="primary" @click=" submitFilesForm('resFormFiles')  " size="small">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {VueEditor} from "vue2-editor";

import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';

import { hasPermission,isShow } from '@/common/permission';
import {
  addGree,
  delGree,
  editGree, getCheckDisabledList,
  getFiles,
  getGreetingList,
  getImage, getReList,
  getStaffList,
  getVideo
} from "@/api/scrm/staff/greeting";
import {getStaffUser} from "@/api/scrm/staff/shortcutend";


export default {
  name: 'greeting',
    components: {
        Panle,
        PersButton,
        VueEditor
    },
    data() {
        return {
            loading: false,
            loadingImage: false,
            loadingVideo: false,
            loadingFiles: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            pageSize_image: 10, //一页显示多少条
            pageNumber_image: 1,
            total_image:0,
            pageSize_video: 10, //一页显示多少条
            pageNumber_video: 1,
            total_video:0,
            pageSize_files: 10, //一页显示多少条
            pageNumber_files: 1,
            total_files:0,
            tableData: [],
            tableDataImage: [],
            tableDataVideo: [],
            tableDataFiles: [],
            serachword: '',
            formInline: {},
            open: false,
            openImage:false,
            openVideo:false,
            openFiles:false,
            resForm:{},
            resFormVideo:{},
            resFormFiles:{},
            form: {
                "title": "",
                "content": "",
                "checkList":[]
            },
            rules: {
                title: [{
                    required: true,
                    message: "欢迎语名称不能为空",
                    trigger: "blur"
                }],
                content: [{
                    required: true,
                    message: "内容不能为空",
                    trigger: "blur"
                }],
                
            },
            parentDate: [],
            checkKey: [],
            multipleSelection: [],
            multipleSelectionImage: [],
            multipleSelectionVideo: [],
            multipleSelectionFiles: [],
            // checkedAll: false,
            // checked: true,
            userList:[],
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        // handleClose:function(done){
        //     this.loading=false;
        //     done();
        // },
        init: function() {
            this.loading = true;
            let param = {
                "pageSize": this.pageSize,
                "pageNumber": this.pageNumber,
                "keyword": this.serachword
            }
            getGreetingList(param).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })

        },
        serach: function() {
            this.serachword = this.formInline.keyword;
            this.init();
        },
        handleSizeChange: function(e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleSizeChangeImage: function(e) {
            console.log(e);
            this.pageSize_image = e;
            this.init();
        },
        handleSizeChangeVideo: function(e) {
            console.log(e);
            this.pageSize_video = e;
            this.init();
        },
        handleSizeChangeFiles: function(e) {
            console.log(e);
            this.pageSize_files = e;
            this.init();
        },
        handleCurrentChange: function(e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        handleCurrentChangeImage: function(e) {
            console.log(e);
            this.pageNumber_image = e;
            this.init();
        },
        handleCurrentChangeVideo: function(e) {
            console.log(e);
            this.pageNumber_video = e;
            this.init();
        },
        handleCurrentChangeFiles: function(e) {
            console.log(e);
            this.pageNumber_files = e;
            this.init();
        },
        handleSelectionChange: function(e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)

            }
            this.multipleSelection = selectChang;
            console.log(selectChang);
        },
        handleSelectionChangeImage: function(val) {
            this.multipleSelectionImage = val;
        },
        handleSelectionChangeVideo: function(val) {
            this.multipleSelectionVideo = val;

        },
        handleSelectionChangeFiles: function(val) {
            this.multipleSelectionFiles = val;
        },
        //上传图片
        openUploadImage: async function (){
            let param = {
                "pageSize": this.pageSize_image,
                "pageNumber": this.pageNumber_image,
            }
             const res = await getImage(param);
             this.tableDataImage  = res.data.list;
             this.openImage = true;
             this.total_image = res.data.total;
             this.loadingImage = false;

        },
        //上传视频
        openUploadVideo: async function (){
            let param = {
                "pageSize": this.pageSize_video,
                "pageNumber": this.pageNumber_video,
            }
             const res = await getVideo(param);
             this.tableDataVideo  = res.data.list;
             this.openVideo = true;
             this.total_video = res.data.total;
             this.loadingVideo = false;

        },
        //上传文件
        openUploadFiles: async function (){
            let param = {
                "pageSize": this.pageSize_files,
                "pageNumber": this.pageNumber_files,
            }
            const res = await getFiles(param);
            this.tableDataFiles  = res.data.list;
            this.openFiles = true;
            this.total_files = res.data.total;
            this.loadingFiles = false;

        },
        add: async function() {
            // const res = await getStaffList();
            // this.checkList = res.data;
            const des = await getCheckDisabledList();
            this.userList = [...des.data];
            this.form = {
                "title": "",
                "value": "",
                "content": "",
                "checkList": []

            };
            this.checkKey = [];
            this.open = true;
        },
        submitImageForm:function(data){
            
            if(this.multipleSelectionImage.length>1){
                this.msgError('只能选择一张图片');
                return ;
            }
            if(this.multipleSelectionImage.length==0){
                this.msgError('未选择任何图片');
                return;
            }  
            let image_url = this.multipleSelectionImage[0].src;
            this.form.image = image_url;
            this.openImage = false;
        },
        submitVideoForm:function(data){

            if(this.multipleSelectionVideo.length>1){
                this.msgError('只能选择一个视频');
                return ;
            }
            if(this.multipleSelectionVideo.length==0){
                this.msgError('未选择任何视频');
                return;
            }
            let video_url = this.multipleSelectionVideo[0].media_id;
            this.form.video = video_url;
            this.openVideo = false;
        },
        submitFilesForm:function(data){

            if(this.multipleSelectionFiles.length>1){
                this.msgError('只能选择一个文件');
                return ;
            }
            if(this.multipleSelectionFiles.length==0){
                this.msgError('未选择任何文件');
                return;
            }
            let file_url = this.multipleSelectionFiles[0].media_id;
            this.form.files = file_url;
            this.openFiles = false;
        },
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    addGree(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        delGreeitng:function(data) {
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delGree(data).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editGreeting: async function(data){
            this.userList=[];
            const list = await getCheckDisabledList({id:data.id});
            this.userList = list.data;
           let checkList=[];
           for(let i=0;i<this.userList.length;i++){
            if(this.userList[i].checked){
              this.form.checkList.push(this.userList[i].userid)
            }
          }
            let editForm ={
                "id":data.id,
                "title":data.title,
                "content":data.content,
                "image":data.image,
                "video":data.video,
                "files":data.files,
                "url":data.url,
                "checkList":checkList
            }
            this.form = {...editForm};
            this.open=true;
        },
        subEditForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    editGree(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common";

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}
.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;
    position: relative;
    overflow: hidden; */
    width: 100px;
    height: 100px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}
</style>
